<template>
  <div>
    <public-head title="缴费记录"></public-head>
    <yd-infinitescroll :callback="loadList" ref="recordListScroll">
      <!-- <div v-for="item in recordLists" :key="item.chargeId" slot="list">{{item.sn}}</div> -->
      <yd-preview
        v-for="item in recordLists"
        :key="item.chargeId"
        :buttons="[]"
        slot="list"
        style="margin:10px 0px 10px 0px"
      >
        <yd-preview-header>
          <div slot="left">收费单号：</div>
          <div slot="right">{{item.sn}}</div>
        </yd-preview-header>
        <yd-preview-item>
          <div slot="left">收费科目：</div>
          <div slot="right">{{item.typeName}}</div>
        </yd-preview-item>
        <yd-preview-item>
          <div slot="left">实付金额：</div>
          <div slot="right">￥{{item.receiveAmount}}</div>
        </yd-preview-item>
        <yd-preview-item>
          <div slot="left">支付方式：</div>
          <div slot="right">{{item.payWay|filterPayType}}</div>
        </yd-preview-item>
        <yd-preview-item>
          <div slot="left">支付时间：</div>
          <div slot="right">{{item.dataModify|dateTimeFilter}}</div>
        </yd-preview-item>
        <yd-preview-item v-if="item.items.length>0">
          <div slot="left">收费明细：</div>
          <div slot="right">
            <div v-for="(detail,i) in item.items" :key="i">
              <p>{{detail.name}} ￥{{detail.num*detail.price}}</p>
            </div>
          </div>
        </yd-preview-item>
      </yd-preview>
      <!-- 数据全部加载完毕显示 -->
      <span slot="doneTip">没有更多的记录~~</span>
    </yd-infinitescroll>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import moment from "moment";
export default {
  components: {},
  data() {
    return {
      page: 0,
      limit: 2,
      recordLists: [] // 已缴费用列表
    };
  },
  created() {
    this.loadList();
  },
  filters: {
    dateTimeFilter(date) {
      if (date != null) {
        console.log(date);
        return moment(date).format("YYYY-MM-DD HH:mm");
      } else {
        return "";
      }
    },
    filterPayType(type) {
      if (type == 1) {
        return "微信";
      }
      if (type == 2) {
        return "现金";
      }
      if (type == 3) {
        return "刷卡";
      }
    }
  },
  methods: {
    loadList() {
      this.isLoading(true);
      this.axios
        .post(root + "/api/charge/list/myFee", {
          token: this.token,
          page: this.page,
          limit: this.limit,
          type: 1
        })
        .then(res => {
          this.isLoading(false);
          if (res.data.status == 1) {
            // console.log(res.data.data.records);
            // this.recordLists = Object.assign(
            //   this.recordLists,
            //   res.data.data.records
            // );
            // console.log(this.recordLists);
            this.recordLists = res.data.data.records;
            this.page++;
          }
        });
    },
    handleReachBottom() {
      this.fetchDate();
    },
    ...mapActions(["isLoading"])
  },
  computed: {
    ...mapState(["is_loading", "token"])
  }
};
</script>

<style lang="less" scoped>
</style>